<template>
    <fieldset>
        <legend>动画</legend>
        <button @click="flag = !flag">点击</button>
        <transition enter-active-class="animate__animated animate__rubberBand"
                    leave-active-class="animate__animated animate__bounceOutDown">
            <div class="demo" v-show="flag"></div>
        </transition>
    </fieldset>
</template>

<script>
// 什么条件会触发动画

// 1.v-show

// 2.v-if

// 3.component动态组件切换

//vue提供了一个组件叫做transition

//引入animate.css
import "animate.css"

export default {
    data() {
        return {
            flag: true
        }
    }
}
</script>

<style scoped>
.demo {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid red;
    position: absolute;
    left: 40%;
    top: 40%;
}
</style>